<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>生活调研问卷</title>
    <!-- 引入 vant UI 组件库样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" type="text/css" href="../../common/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/baseInfo.css"/>
    <style>
        .life-question-img {
            width: 5.2rem;
            height: 3.2rem;
            margin-right: 0.22rem;
            margin-bottom: 0.48rem;
        }
        .question-title {
            font-size: 0.31rem;
            font-weight: 500;
            margin-bottom: 0.11rem;
        }
        .question-btn {
            display: flex;
            flex-direction: column;
        }
        .btn {
            width: 6.86rem;
            height: 0.83rem;
            color: #666666;
            text-align: left!important;
	        margin-top: 0.21rem!important;
        }
        .van-button{
            margin:0;
        }
        .van-dialog__footer > .van-button{
            padding: 0;
        }
        .van-dialog__footer > .van-button > .van-button__content {
            justify-content: center;
        }
        .life-back {
            width: 1.2rem;
            height: 1.2rem;
            margin: 1rem 2.83rem;
        }
        .quiz-num {
            color: rgba(0, 0, 0, 0.5);
            font-size: 0.22rem;
        }
        .container{
            padding: 0.32rem;
            width: 6.86rem;
            margin: 0.32rem 0;
            border-radius: 0;
            min-height: 11.1rem;
        }
        .tag{
            width: 1.44rem;
            height: 0.48rem;
            background-color: #01CD9C;
            border-radius: 0.6rem;
            color: #fff;
            margin-top: 0.24rem;
            text-align: center;
            line-height: 0.48rem;
        }
        .active{
            background-color: #01CD9C;
            color: #fff;
        }
        .van-dialog__confirm{
            color:#01CD9C;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="生活调研问卷" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div class="container">
            <img class="life-question-img" :src="quiz.url"></img>
            <div style="display: inline-block;">
                <span class="quiz-num">题目：<span style="color: #01CD9C;">{{+quiz.key + 1}}</span>{{`/${quizList.length}`}}</span>
                <div class="tag">{{quiz.tag}}</div>
            </div>
            <div class="life-question">
                <p class="question-title">{{quiz.title}}</p>
                <div class="question-btn">
                    <van-button v-for="(v, i) in quiz.button" :class="v.active ? 'active btn' : 'btn'" @click="handleClick(v, i)">{{v.item}}</van-button>
                </div>
            </div>
            <img v-if="quiz.key != 0" class="life-back" src="../img/back.png" @click="handleBack">
            </img>


        </div>
    </div>
</body>
<!-- 上线环境用 -->
<script src="../../base.js"></script>
<script src="../../common/js/vue.global.prod.js"></script>
<!-- 引入 UI 组件库 -->
<script src="../../common/js/vant.min.js"></script>
<!-- axios 接口调用 -->
<script src="../../common/js/axios.min.js"></script>
<script src="../../common/js/rem.js"></script>


<script type="module">
    import {
        getAction,
        postAction,
        spliceUrl,
    } from '../../common/js/api/vue3-axios-utils.js'
    import { throttle } from '../js/utils.js'
    const baseInfo = {
        data() {
            return {
                quiz: {},
                num: 0,
                list: [],
                quizList:[],
                patientId:''
            }
        },
        created() {
            postAction(spliceUrl('/questionnaire/list'),{}).then(res=>{
                if (res.data.success){
                    this.quizList = res.data.result.map((v,i)=>{
                        return {
                            dataId:v.dataId,
                            title: v.question,
		                    key: i,
		                    url: v.thumb,
		                    tag: v.category,
		                    button: v.options,
                            type:v.type
                        }
                    })
                    this.quiz = this.quizList[this.num]
                }
            })
            this.patientId = localStorage.getItem('pid')
        },
        methods: {
            handleClick:throttle(function(v,i){
                this.quizList.forEach(n => {
                    if (n.key == this.quiz.key) {
                        n.button.forEach(item => {
                            item.active = false
                        })
                        n.button[i].active = true
                        postAction(spliceUrl('/questionnaire/answer'),{
                            answer:n.button[i].item,
                            patientId:this.patientId,
                            questionId:n.dataId,
                            questionType:n.type,
                            score:n.button[i].score
                        }).then(res=>{
                            if(res.data.success){
                                setTimeout(() => {
                                    if (this.num == this.quizList.length - 1) {
                                        this.$dialog.confirm({
                                            message:'您已填写完成，是否提交问卷'
                                        }).then(()=>{
                                            // this.submit()
                                            window.location.href = "./lifeEnd.html?id="+this.patientId
                                        }).catch(()=>{})
                                    } else {
                                        this.num += 1
                                        this.quiz = this.quizList[this.num]
                                    }
                                }, 500);
                            }
                        })
                    }
                })
            },500),
            handleBack() {
                if (this.num < 1) {
                    history.back()
                } else {
                    this.num -= 1
                    this.quiz = this.quizList[this.num]
                }
            },
            onClickLeft() {
                history.back()
            },
            onClickRight() {
                window.location.href = "../index.html"
            }        
        }

    };

    const app = Vue.createApp(baseInfo);

    app.use(vant);
    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    app.use(vant.Lazyload);  
    app.use(vant.Popup);  

    // 调用函数组件，弹出一个 Toast
    // vant.Toast("刷新成功");
    app.mount("#app");
</script>

</html>
